<template>
  <div class="insp-timeLine">
    <div class="insp-timeLine-item">
      <p :class="['insp-timeLine-info','completeText']">开始养护</p>
      <div :class="['insp-timeLine-dot',{ complete: status != 0 },{ progress: status === 0 }]"></div>
      <div :class="['insp-timeLine-border','active']"></div>
      <p class="insp-timeLine-info">拟定计划</p>
    </div>
    <div class="insp-timeLine-item">
      <p :class="['insp-timeLine-info',{  completeText: status != 0},{ noText: status === 0 }]">在进行中</p>
      <div :class="['insp-timeLine-dot',{ progress: status === 1 },{ complete: status != 0 && status != 1 }]"></div>
      <div :class="['insp-timeLine-border',{ active: status != 0 }]"></div>
      <p class="insp-timeLine-info">执行计划</p>
    </div>
    <div class="insp-timeLine-item">
      <p :class="['insp-timeLine-info',{ completeText: status === 2 },{ noText: status === 0 || status === 1 }]">
        完成养护</p>
      <div :class="['insp-timeLine-dot',{ complete: status === 2 }]"></div>
      <div :class="['insp-timeLine-border',{ active: status === 2 }]"></div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      status: {
        type: Number,
        default: 0
      }
    }
  };

</script>
<style scoped lang="scss">
  @import '../insp.scss';

</style>
